<template>
  <view class="content">
    <swiper
      class="swiper-box"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular="true"
      previous-margin="20px"
      next-margin="20px"
    >
      <swiper-item v-for="(item, index) in info" :key="index">
        <view :class="item.colorClass" class="swiper-item">
          <image class="image" :src="item.url" mode="aspectFill" />
        </view>
      </swiper-item>
    </swiper>

    <view class="fn-box">
      <view class="menber" @click="toMenberPage"> 成员 </view>

      <view class="right">
        <view class="prize" @click="toPrizePage"> 奖项 </view>
        <view class="money-show" @click="toMoneyShowPage"> 经费公示 </view>
      </view>
    </view>
    <view class="items" @click="toItemsListPage"> 项目集 </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/modules/login.js'

const userStore = useUserStore()
const indicatorDots = ref(true)
const autoplay = ref(true)
const interval = ref(2000) //切换的间隔时间
const duration = ref(500) //滑动动画时长
const info = ref([
  {
    colorClass: 'uni-bg-red',
    url: 'https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/iu1.png',
    content: '内容 A'
  },
  {
    colorClass: 'uni-bg-green',
    url: 'https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/iu1.png',
    content: '内容 B'
  },
  {
    colorClass: 'uni-bg-blue',
    url: 'https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/iu3.png',
    content: '内容 C'
  }
])

function toItemsListPage() {
  uni.navigateTo({
    url: '../indexFnPage/itemsListPage/itemsListPage'
  })
}

function toMoneyShowPage() {
  uni.navigateTo({
    url: '../indexFnPage/moneyShow/moneyShow'
  })
}

function toMenberPage() {
  uni.navigateTo({
    url: '../FnPage/menberList/menberList'
  })
}

function toPrizePage() {
  uni.navigateTo({
    url: '../indexFnPage/prizeLIst/prizeList'
  })
}
</script>


<style lang="scss">
.content {
  /* text-align: center; */
  height: 100vw;

  .swiper-box {
    /* width: 95%; */
    height: 200px;

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #999;
      color: #fff;
      margin: 10px;
      border-radius: 15upx;
      /* app上运行不显示图片，就需要加下面这行，设置高度 */
      height: 380upx;

      .image {
        /* width: 750rpx; */
        height: 380upx;
        border-radius: 15upx;
      }
    }
  }
}

.fn-box {
  display: flex;
  width: 100%;
  padding: 20rpx;
  flex-direction: row;
}

.menber {
  width: 40%;
  box-shadow: rgba(99, 99, 99, 0.2) 5rpx 5rpx 8rpx 5rpx;
  flex-direction: row;
  margin: 4%;
  height: 450rpx;
  font-size: 50rpx;
  font-weight: 600;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
  border-radius: 20rpx;
  background: linear-gradient(to right, #26a4f5, #96c4f5);
}

.right {
  width: 40%;
  margin: 4%;
  margin-left: -3rpx;
  height: 450rpx;
}

.prize {
  width: 100%;
  box-shadow: rgba(99, 99, 99, 0.2) 5rpx 5rpx 8rpx 5rpx;
  margin-bottom: 6%;
  height: 47%;
  background: linear-gradient(to right, #ff7e8d, #fda774);
  font-size: 50rpx;
  font-weight: 600;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
  border-radius: 20rpx;
}

.money-show {
  width: 100%;
  box-shadow: rgba(99, 99, 99, 0.2) 5rpx 5rpx 8rpx 5rpx;
  height: 47%;
  background: linear-gradient(to right, #e432f9, #a78eff);
  font-size: 50rpx;
  font-weight: 600;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
  border-radius: 20rpx;
}

.items {
  width: 100%;
  margin: 6%;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  height: 250rpx;
  background: linear-gradient(to right, #fda418, #edf3a7);
  width: 85%;
  margin-top: -1%;
  font-size: 50rpx;
  font-weight: 600;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
  border-radius: 20rpx;
}
</style>
